<template>
    <div>
        <query-panel @on-query="handleQuery">
            <query></query>
        </query-panel>

        <br/>

        <Row>
            <Col>
                <Button type="error" icon="md-close" @click="handleDelete">删 除</Button>
            </Col>
        </Row>

        <br/>

        <Card>
            <tables ref="tables" search-place="top"
                    v-model="tableData"
                    :columns="columns"
                    :loading="loading"
                    @on-delete="handleDelete"
                    @on-selection-change="handleSelectionChange">
                <template slot="requestId" slot-scope="props">
                    <a href="#" @click.prevent="handleGetByRequestId(props)">
                        <Icon type="ios-loop-strong"></Icon>
                        {{props}}
                    </a>
                </template>
                <template slot="time" slot-scope="props">
                    <datetime-interval :time="props"></datetime-interval>
                </template>
                <template slot="action" slot-scope="props">
                    <Button type="primary" size="small" @click="handleViewDetails(props)">查看详情</Button>
                </template>
            </tables>
            <br/>
            <page :total="pagination.DataCount"
                  :page-size="pagination.PageSize"
                  :current="pagination.PageIndex"
                  show-elevator show-sizer show-total
                  @on-change="handlePageIndexChange"
                  @on-page-size-change="handlePageSizeChange"></page>
        </Card>

        <log-details :fullscreen="false" v-model="detailModal" :formItem="selectData" :width="800"></log-details>

        <delete-confirm v-model="deleteConfirmModal" @confirm-delete="handleConfirmDelete"></delete-confirm>

        <log-info-drawer ref="logInfoList" v-model="showDrawerList" :query-data="queryCondition"></log-info-drawer>

    </div>
</template>

<script>

    import Tables from '_c/tables';
    import QueryPanel from '_s/query-panel';
    import Query from './query';
    import tableColumns from './table-columns';
    import LogDetails from '../shared/log-details';
    import {createNamespacedHelpers} from 'vuex';
    import Enumerable from 'linq';
    import DeleteConfirm from '_c/delete-confirm';
    import {remove} from '@/api/warnlog';
    import DatetimeInterval from '_c/datetime-interval';
    import LogInfoDrawer from '_s/log-info-drawer';

    const {mapActions, mapMutations} = createNamespacedHelpers('warnlog');

    export default {
        name: 'WarnLog',
        components: {
            QueryPanel,
            Query,
            Tables,
            LogDetails,
            DeleteConfirm,
            DatetimeInterval,
            LogInfoDrawer
        },
        data() {
            return {
                tableData: [],
                //表格是否正在加载
                loading: false,
                //详情模态框是否显示
                detailModal: false,
                selectData: {},
                selectIds: [],
                deleteConfirmModal: false,
                //是否显示抽屉
                showDrawerList: false,
                //查询条件
                queryCondition: {}
            };
        },
        computed: {
            columns() {
                return tableColumns.columns(this);
            },
            pagination() {
                let pagination = this.$store.state.warnlog.pagination;
                if (!pagination) return {DataCount: 0};
                return pagination;
            },
            queryData() {
                let query = this.$store.state.warnlog.queryData;
                query.Pagination = this.pagination;
                return query;
            }
        },
        methods: {
            ...mapActions([
                'handleStoreQuery'
            ]),
            ...mapMutations([
                'setPagination',
                'setPageSize',
                'setPageIndex'
            ]),
            handleQuery() {
                this.loading = true;
                this.handleStoreQuery(this.queryData).then(res => {
                    this.tableData = res.Data.List;
                    this.setPagination(res.Data.Pagination);
                    this.loading = false;
                });
            },
            handleSelectionChange(select) {
                this.selectIds = Enumerable.from(select)
                    .select(item => item.Id)
                    .toArray();
            },
            handleDelete() {
                if (this.selectIds == undefined || this.selectIds.length == 0) {
                    alert('你没有选中任何项！');
                    return;
                }
                this.deleteConfirmModal = true;
            },
            handlePageIndexChange(pageIndex) {
                this.setPageIndex(pageIndex);
                this.handleQuery();
            },
            handlePageSizeChange(pageSize) {
                this.setPageIndex(1);
                this.setPageSize(pageSize);
                this.handleQuery();
            },
            handleViewDetails(param) {
                this.selectData = param;
                this.detailModal = true;
            },
            handleConfirmDelete() {
                remove(this.selectIds).then(res => {
                    this.deleteConfirmModal = false;
                    this.handleQuery();
                });
            },
            //按照RequestId查询
            handleGetByRequestId(id) {
                this.queryCondition = {
                    RequestId: id
                };
                console.log(this.queryCondition);
                this.showDrawerList = true;
                this.$refs.logInfoList.queryLog(this.queryCondition);
            }
        },
        mounted() {
            this.handleQuery();
        }
    };
</script>

<style scoped>

</style>
